<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--流程分类-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="cateName" placeholder="请输入分类名称" clearable size="default" prefix-icon="el-icon-search"
            style="margin-bottom: 20px" />
        </div>
        <div class="head-container">
          <el-tree
            :data="cateOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            default-expand-all
            @node-click="handleNodeClick"
          >
            <template #default="{ node }">
              <span>
                <b>{{ node.label }}</b>
              </span>
            </template>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="流程名称" prop="nameLike">
            <el-input
              v-model="queryParams.nameLike" placeholder="请输入要查询的流程名称" clearable size="default"
              style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="流程编码" prop="key">
            <el-input
              v-model="queryParams.key" placeholder="请输入要查询的流程编码" clearable size="default"
              style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item>
            <search-button @click="handleQuery" />
            <reset-button @click="resetQuery" />
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <add-button @click="handleAdd" :perm="['wf:manager:definition:insert']" />
            <import-button @click="uploadHandler" :perm="['wf:manager:definition:import']" />
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @query-table="getList" />
        </el-row>
        <el-table v-loading="loading" :data="definitionList" @selection-change="handleSelectionChange">
          <el-table-column label="流程ID" prop="id" width="240" />
          <el-table-column label="流程名称" prop="name" :show-overflow-tooltip="true" min-width="180" />
          <el-table-column label="流程编码" prop="key" :show-overflow-tooltip="true" min-width="180" />
          <el-table-column label="标题模板" prop="sequenceCode" :show-overflow-tooltip="true" min-width="180">
            <template #default="scope">
              {{ sequenceOptions.find(item => item.sequenceCode === scope.row.sequenceCode)
              ? sequenceOptions.find(item => item.sequenceCode === scope.row.sequenceCode).sequenceFormat
              : '' }}
            </template>
          </el-table-column>
          <el-table-column label="开启授权" prop="enableAuth" align="center" width="120">
            <template #default="scope">
              <yes-no-tag :value="scope.row.enableAuth" />
            </template>
          </el-table-column>
          <el-table-column label="部署ID" prop="deploymentId" width="240" />
          <el-table-column label="创建时间" align="center" prop="createTime" width="160" />
          <el-table-column label="更新时间" align="center" prop="updateTime" width="160" />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="250"
            fixed="right"
          >
            <template #default="scope">
              <div class="operation">
                <text-edit-button
                  @click="handleUpdate(scope.row)"
                  :perm="['wf:manager:definition:edit']"
                />
                <text-edit-button
                  @click="openEditorHandler(scope.row)"
                  :perm="['wf:manager:definition:edit']"
                  text="流程设计"
                />
                <text-publish-button
                  @click="publishHandler(scope.row)"
                  :perm="['wf:manager:definition:edit']"
                />
                <el-dropdown>
                  <span class="ml10 operation-drop">
                    <text-button text="更多" />
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>
                        <text-edit-button @click="openHistoryHandler(scope.row)" :perm="['wf:manager:definition:edit']" text="历史版本" />
                      </el-dropdown-item>
                      <el-dropdown-item v-if="isFlowable">
                        <text-edit-button @click="openViewHandler(scope.row)" :perm="['wf:manager:definition:edit']" text="查看流程" />
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <text-copy-button @click="copyHandler(scope.row)" :perm="['wf:manager:definition:edit']" />
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <text-download-button @click="downloadHandler(scope.row)" :perm="['wf:manager:definition:download']" />
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <!-- <el-button size="mini" link icon="el-icon-close" @click="handleDelete(scope.row)">删除</el-button> -->
                        <text-delete-button
                          @click="handleDelete(scope.row)" :perm="['wf:manager:definition:remove']"
                          :title="'是否确认删除流程模型[ ' + scope.row.name + '(' + scope.row.key + ')' + ' ]?'" />
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <!-- 编辑流程 -->
    <drag-dialog
      :title="wf.title"
      :close-on-click-modal="false"
      v-model="wf.open"
      width="95%"
      top="5"
      z-index="100"
      append-to-body
      fullscreen
      @close="onEditorClose"
    >
      <bpmnEditor v-if="isFlowable && wf.open" :id="wf.id" @saved="wf.open = false" />
      <iframe-view v-else :url="wf.url" />
    </drag-dialog>

    <drag-dialog
      title="查看流程图"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-model="wf.openView"
      width="95%"
      top="5"
      append-to-body
      fullscreen
      z-index="1000"
    >
      <bpmnViewer v-if="wf.openView" :id="wf.id" />
    </drag-dialog>

    <!-- 新增/修改对话框 -->
    <drag-dialog
      :title="title"
      :close-on-click-modal="false"
      v-model="open"
      width="500px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="流程名称：" prop="name">
          <el-input v-model="form.name" placeholder="请输入流程名称" clearable />
        </el-form-item>
        <el-form-item label="流程编码：" prop="key">
          <el-input v-model="form.key" placeholder="请输入流程编码" clearable :disabled="form.id != null" />
          <span style="color: red">保存后不可以修改</span>
        </el-form-item>
        <el-form-item label="流程标题模板：" prop="sequenceCode">
          <el-select v-model="form.sequenceCode" placeholder="请选择流程标题模板" clearable>
            <el-option v-for="item in sequenceOptions" :key="item.sequenceCode" :label="item.sequenceName" :value="item.sequenceCode" />
          </el-select>
        </el-form-item>
        <el-form-item label="开启授权：" prop="enableAuth">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-switch
                v-model="form.enableAuth"
                active-value="Y"
                inactive-value="N">
              </el-switch>
            </el-col>
            <el-col :span="20">
              <span style="color: red">开启后只有授权的用户或组织可发起流程</span>
            </el-col>
          </el-row>
          <el-row>
            <span>流程发布后，请到部署管理->流程管理->授权配置</span>
          </el-row>
        </el-form-item>
        <el-form-item label="所属分类" prop="catecode">
          <el-tree-select
            v-model="form.catecode" :data="formatCateOptions" check-strictly :render-after-expand="false"
            placeholder="请选择所属分类" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </drag-dialog>

    <!-- 复制对话框 -->
    <drag-dialog
      :title="copyForm.title"
      :close-on-click-modal="false"
      v-model="copyForm.open"
      width="600px"
      append-to-body
    >
      <el-form ref="copyForm" :model="copyForm" :rules="rules" label-width="150px">
        <el-form-item label="新流程名称" prop="name">
          <el-input v-model="copyForm.name" placeholder="请输入新的流程名称" clearable />
        </el-form-item>
        <el-form-item label="新流程编码" prop="key">
          <el-input v-model="copyForm.key" placeholder="请输入新的流程编码" clearable />
          <span style="color: red">保存后不可以修改</span>
        </el-form-item>
        <el-form-item label="新流程标题模板：" prop="sequenceCode">
          <el-select v-model="copyForm.sequenceCode" placeholder="请选择新流程标题模板" clearable>
            <el-option v-for="item in sequenceOptions" :key="item.sequenceCode" :label="item.sequenceName" :value="item.sequenceCode" />
          </el-select>
        </el-form-item>
        <el-form-item label="开启授权：" prop="enableAuth">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-switch
                v-model="copyForm.enableAuth"
                active-value="Y"
                inactive-value="N">
              </el-switch>
            </el-col>
            <el-col :span="20">
              <span style="color: red">开启后只有授权的用户或组织可发起流程</span>
            </el-col>
          </el-row>
          <el-row>
            <span>流程发布后，请到部署管理->流程管理->授权配置</span>
          </el-row>
        </el-form-item>
        <el-form-item label="新所属分类" prop="catecode">
          <el-tree-select
            v-model="copyForm.catecode" :data="formatCateOptions" check-strictly :render-after-expand="false"
            placeholder="请选择新所属分类" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitCopyForm">确 定</el-button>
          <el-button @click="cancelCopyForm">取 消</el-button>
        </div>
      </template>
    </drag-dialog>

    <!-- 上传JSON-->
    <drag-dialog
      :title="upload.title"
      :close-on-click-modal="false"
      v-model="upload.open"
      width="600px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".zip"
        :headers="upload.headers"
        :action="upload.url + '/' + upload.ids"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip" style="color: red">
            选择zip格式的压缩文件（通过其他环境导出的**model**.zip压缩包）
          </div>
          <div class="el-upload__tip" style="color: red">
            例：异常发票流程(EXP_WF_INVOICE).model307501.zip
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </drag-dialog>

    <!-- 历史版本弹窗 -->
    <drag-dialog :title="history.title" :close-on-click-modal="false" v-model="history.open" width="70%" append-to-body>
      <el-table v-loading="loading" :data="history.dataList">
        <el-table-column label="流程ID" prop="id" width="300" />
        <el-table-column label="流程名称" prop="name" :show-overflow-tooltip="true" min-width="180" />
        <el-table-column label="流程编码" prop="key" :show-overflow-tooltip="true" min-width="180" />
        <el-table-column label="部署ID" prop="deploymentId" width="240" />
        <el-table-column label="版本号" align="center" prop="version" width="120" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150" fixed="right">
          <template #default="scope">
            <div class="operation">
              <text-reset-button
                @click="handleRollback(scope.row)" :perm="['wf:manager:definition:edit']"
                text="回滚" title="回滚后会覆盖当前版本的未发布状态，是否确认回滚？" />
              <text-edit-button @click="handleHistoryEditJson(scope.row)" text="查看流程" />
            </div>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="history.total > 0" :total="history.total" v-model:page="history.queryParams.pageNum"
        v-model:limit="history.queryParams.pageSize" @pagination="getHistoryList" />

      <template #footer>
        <div class="dialog-footer" style="margin: 40px 30px 0 0">
          <el-button @click="cancelHistory">关 闭</el-button>
        </div>
      </template>
    </drag-dialog>

    <!-- 历史版本流程图查看 -->
    <drag-dialog
      :title="wfHistory.title"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-model="wfHistory.openView"
      width="95%"
      top="5"
      append-to-body
      fullscreen
    >
      <bpmnViewer v-if="isFlowable && wfHistory.openView" :deploymentId="wfHistory.deploymentId" />
      <wfStaticImage v-else :modelId="undefined" :deploymentId="wfHistory.deploymentId" />
    </drag-dialog>
  </div>
</template>

<script>
import IframeView from '@/components/Zmids/IframeView/index.vue'
import {
  listDefinition,
  getDefinition,
  saveDefinition,
  delDefinition,
  publishDefinition,
  copy,
  getHistoryVersion,
  rollbackVersion
} from '@wf/api/wf/definition'

import { debounceWrapper } from '@/utils/zmids'
import { getToken } from '@/utils/auth'
import bpmnEditor from '@wf/components/bpmnjs/bpmnJs'
import bpmnViewer from '@wf/components/bpmnjs/bpmnViewer'
import wfStaticImage from "@/components/Zmids/Workflow/WfStaticImage.vue";
import { getCategoryTree } from '@uni/api/uni/category/info'
import { searchAll } from '@uni/api/uni/sequence'
import defaultSettings from '@/settings'

export default {
  name: 'WfManagerDefinition',
  components: { IframeView, bpmnEditor, bpmnViewer, wfStaticImage },
  data() {
    return {
      //遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      //流程模型定义表格数据
      definitionList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        categoryLike: '',
        nameLike: '',
        key: ''
      },
      // 表单参数
      form: {
        id: undefined,
        name: '',
        key: '',
        sequenceCode: '',
        enableAuth: '',
        catecode: '',
        category: ''
      },
      // 序列编码选择列表
      sequenceOptions: [],
      // 分类树查询参数
      cateName: undefined,
      // 属性组件props
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 流程分类树选项
      cateOptions: undefined,
      // 格式流程分类树选项
      formatCateOptions: undefined,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 上传JSON参数
      upload: {
        // 是否显示弹出层（上传JSON参数）
        open: false,
        // 弹出层标题（上传JSON参数）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { [defaultSettings.tokenName]: 'Bearer ' + getToken() },
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 上传的地址
        url: import.meta.env.VITE_APP_BASE_API + '/wf/manager/definition/upload',
        // 上传的ID（为空表示创建）
        ids: null
      },
      // 流程编辑器页面
      wf: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: '编辑流程',
        // 编辑地址
        url: '',
        openView: false,
        id: 4
      },
      // 表单校验
      rules: {
        name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
        key: [
          { required: true, message: '流程编码不能为空', trigger: 'blur' },
          { pattern: /^[a-zA-Z_][a-zA-Z0-9_-]*$/, message: '名称必须以字母或_开头，且只能输入英文、数字、_和-', trigger: 'blur'}
        ],
        sequenceCode: [{ required: true, message: '流程标题模板不可以为空', trigger: 'change' }],
        catecode: [{ required: true, message: '所属分类不可以为空', trigger: 'change' }]
      },
      // 复制窗口
      copyForm: {
        // 是否显示
        open: false,
        // 标题
        title: '',
        name: '',
        key: '',
        sequenceCode: '',
        enableAuth: '',
        catecode: '',
        category: ''
      },
      // 历史版本界面
      history: {
        // 是否显示
        open: false,
        // 标题
        title: '',
        dataList: [],
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          key: ''
        }
      },
      wfHistory: {
        openView: false,
        title: '查看历史流程图',
        deploymentId: ''
      }
    }
  },
  computed: {
    isFlowable(){
      return import.meta.env.VITE_FLOW_TYPE == 'flowable'
    }
  },
  watch: {
    // 根据名称筛选分类树
    cateName(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getList()
    this.getTreeselect()
    this.getSequenceOptions()
    // 注册编辑器关闭按钮事件
    window.__WF_CALLBACK_EDITOR_CLOSE = () => {
      this.wf.open = false
    }
  },
  methods: {
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.roleId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },

    /**查询流程模型定义列表 */
    getList: debounceWrapper(function () {
      this.loading = true
      listDefinition(this.addDateRange(this.queryParams)).then((response) => {
        this.definitionList = response.data.list
        this.total = response.data.total
        this.loading = false
      })
    }),

    formatCate(options) {
      return options.map(option => ({
        value: option.params.cateCode,  // 使用 params.cateCode 作为 value
        label: option.name,             // 使用 name 作为 label
        children: option.children ? this.formatCate(option.children) : []  // 递归处理 children
      }));
    },

    /** 查询部门下拉树结构 */
    getTreeselect: debounceWrapper(function () {
      //仅查询正常的机构
      getCategoryTree('anvil_wf_platform').then((response) => {
        this.cateOptions = response.data;
        this.formatCateOptions = this.formatCate(this.cateOptions);
      })
    }),

    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },

    // 节点单击事件
    handleNodeClick: debounceWrapper(function (data) {
      this.queryParams.categoryLike = data.params.cateCode;
      this.getList()
    }),

    /** 搜索按钮操作 */
    handleQuery: debounceWrapper(function () {
      this.queryParams.page = 1
      this.getList()
    }),

    /** 重置按钮操作 */
    resetQuery: debounceWrapper(function () {
      this.resetForm('queryForm');
      this.queryParams.nameLike = '';
      this.queryParams.key = '';
      this.queryParams.categoryLike = '';
      this.cateName = ''
      this.handleQuery()
    }),

    getSequenceOptions(){
      searchAll().then(res => {
        this.sequenceOptions = res.data;
      })
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '新增流程模型'
      console.log(this.formatCateOptions)
    },
    /** 修改按钮操作 */
    handleUpdate: debounceWrapper(function (row) {
      this.reset()
      this.loading = true
      getDefinition(row.id).then((response) => {
        this.loading = false
        this.form = response.data
        // 回显去除前缀，通过pop直接获取数组最后的值
        if(response.data.category){
          this.form.catecode = response.data.category.split('#').pop();
          console.log(this.form.catecode)
        }
        this.open = true
        this.title = '修改流程模型'
      })
    }),
    /** 提交按钮 */
    submitForm: debounceWrapper(function () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.form.category = this.findNodePath(this.formatCateOptions, this.form.catecode).join('#')
          saveDefinition(this.form).then((response) => {
            this.loading = false
            this.open = false
            if (response.data >= 1) {
              this.msgSuccess('保存成功')
              this.getList()
            } else {
              this.msgError('保存失败')
            }
          })
        }
      })
    }),
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    /** 提交按钮 */
    submitCopyForm: debounceWrapper(function () {
      this.$refs['copyForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.copyForm.category = this.findNodePath(this.formatCateOptions, this.copyForm.catecode).join('#')
          copy(this.copyForm).then((response) => {
            this.loading = false
            this.copyForm.open = false
            this.msgSuccess('复制成功')
            this.getList()
          })
        }
      })
    }),
    // 取消按钮
    cancelCopyForm() {
      this.copyForm.open = false
      this.resetCopyForm()
    },
    // 递归查找节点并追踪路径
    findNodePath(data, targetValue, path = []) {
      for (const node of data) {
        const currentPath = [...path, node.value]; // 当前路径
        if (node.value === targetValue) {
          return currentPath; // 找到目标节点，返回路径
        }
        if (node.children && node.children.length > 0) {
          const result = this.findNodePath(node.children, targetValue, currentPath);
          if (result) {
            return result; // 如果在子节点中找到，返回路径
          }
        }
      }
      return null; // 未找到返回 null
    },
    // 表单重置
    resetCopyForm() {
      this.copyForm = {
        open: false,
        name: '',
        key: '',
        sequenceCode: '',
        enableAuth: '',
        catecode: '',
        category: ''
      }
      this.resetForm('copyForm')
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        name: '',
        key: '',
        sequenceCode: '',
        enableAuth: '',
        catecode: '',
        category: ''
      }
      this.resetForm('form')
    },
    // 打开编辑器页面
    openEditorHandler: debounceWrapper(function (row) {
      this.wf.title = '编辑流程-' + row.name
      this.wf.open = true
      // this.wf.url = process.env.VUE_APP_GATEWAY_URL + "/wf/editor?modelId=" + row.id;
      if(this.isFlowable){
        this.wf.id = row.id
      }else{
        this.wf.url = `${import.meta.env.VITE_APP_GATEWAY_URL}/wf/editor?modelId=${row.id}&access_token=${getToken()}`
      }
    }),
    openViewHandler:debounceWrapper(function (row) {
      this.wf.openView = true
      this.wf.id = row.id
    }),
    openHistoryHandler:debounceWrapper(function (row) {
      this.history.title = '历史版本';
      this.history.queryParams.key = row.key;
      this.getHistoryList();
      this.history.open = true;
    }),
    // 获取历史版本清单
    getHistoryList(){
      getHistoryVersion(this.history.queryParams).then(res => {
        this.history.dataList = res.data.list;
        this.history.total = res.data.total;
      });
    },
    // 回滚历史版本
    handleRollback:debounceWrapper(function (row) {
      rollbackVersion(row).then(res => {
        this.$message.success("版本回滚成功，发布后生效！")
        this.cancelHistory();
        this.getList();
      }).catch(e => {
        this.$message.error("回滚失败，请联系管理员解决")
      })
    }),
    // 查看历史版本流程
    handleHistoryEditJson:debounceWrapper(function (row) {
      this.wfHistory.deploymentId = row.deploymentId;
      this.wfHistory.openView = true;
    }),
    // 关闭历史清单弹窗
    cancelHistory:debounceWrapper(function () {
      this.history = {
        // 是否显示
        open: false,
        // 标题
        title: '',
        dataList: [],
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          key: ''
        }
      }
    }),
    // 编辑器关闭事件
    onEditorClose() {
      // 刷新列表
      this.getList()
    },
    //发布流程
    publishHandler: debounceWrapper(function (row) {
      const modelId = row.id || this.ids.join(',')
      this.$confirm('是否确认发布流程[ ' + row.name + '(' + row.key + ')' + ' ]?', '警告', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      })
        .then(() => {
          this.loading = true
          return publishDefinition(modelId)
        })
        .then(() => {
          this.msgSuccess('发布成功')
          this.loading = false
          this.getList()
        })
        .catch((err) => {
          console.error(err)
          this.loading = false
        })
    }),
    // 导入按钮
    uploadHandler(row) {
      this.upload.title = '导入流程JSON数据'
      this.upload.ids = (row && row.id) || 'create'
      this.upload.open = true
    },
    // 复制按钮
    copyHandler(row) {
      this.resetCopyForm()
      this.copyForm = {
        open: true,
        title: '复制流程模型',
        id: row.id,
        name: row.name + '副本',
        key: row.key + '_copy',
        sequenceCode: row.sequenceCode,
        enableAuth: row.enableAuth,
        catecode: row.category ? row.category.split('#').slice(1).join("#") : '',
        description: row.description || ''
      }
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert(response.msg, '上传结果', { dangerouslyUseHTMLString: true })
      this.getList()
    },
    // 提交上传文件
    submitFileForm: debounceWrapper(function () {
      this.$refs.upload.submit()
    }),
    //下载JSON
    downloadHandler: debounceWrapper(function (row) {
      this.downloadUrl(
        import.meta.env.VITE_APP_GATEWAY_URL + '/wf/manager/definition/download/' + row.key
      )
      this.msgSuccess('正在启动下载......')
    }),
    /** 删除按钮操作 */
    handleDelete: debounceWrapper(function (row) {
      this.loading = true
      delDefinition(row.id)
        .then(() => {
          this.msgSuccess('删除成功')
          this.loading = false
          this.getList()
        })
        .catch(() => {})
    })
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .el-upload {
    width: 100%;
    .el-upload-dragger {
      width: 100%;
    }
  }
}
.operation {
  display: flex;
  align-items: center;

  &-drop {
    display: flex;
    align-items: center;
  }
}
</style>
